<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="../template/adminTemplate.jsp">
	<ui:define name="scripts">
		<!-- Google Maps -->
		<script
			src="http://maps.google.com/maps?file=api&amp;v=${webAppConfiguration.googleMapApiVersion}&amp;key=${webAppConfiguration.googleMapApiKey}"
			type="text/javascript"></script>
		
		<!-- DWR -->
		<script type='text/javascript'
			src='/tt-jsf/dwr/interface/travelTracker.js'></script>
		<script type='text/javascript'
			src='/tt-jsf/dwr/interface/blogService.js'></script>
		<script type='text/javascript'
			src='/tt-jsf/dwr/engine.js'></script>
		
		<script type="text/javascript">
		    //<![CDATA[
			
		    function load() {
				if (GBrowserIsCompatible()) {
					map = new GMap2(document.getElementById("mapDiv123"));
					map.addControl(new GLargeMapControl());
					map.addControl(new GScaleControl());
					map.addControl(new GMapTypeControl());
					map.addControl(new GOverviewMapControl());
					map.setCenter(new GLatLng(37.4419, -122.1419), 5);
					map.enableScrollWheelZoom();
					
					mgr = new GMarkerManager(map);
					
					GEvent.addDomListener(document.getElementById("mapDiv123"), (addEventListener?"DOMMouseScroll":"mousewheel"), prev);
					
					page = 0;
					trip = 0;
				}
		    }
			
			function prev(e) {
				if(window.event) { event.returnValue = false; } // IE
				if(e.cancelable) { e.preventDefault(); }  // DOM-Standard 
			}
			
			function loadWayPoints(tripKey, pageNumber){
				trip = tripKey;
				if(pageNumber == 0) {
					page = 0;
					loadBlogEntries(tripKey);
				}
				document.getElementById("moreLink").innerHTML="...";
				travelTracker.getPagedWayPoints(tripKey, page, 1, handleWayPoints);
				page = pageNumber + 1;
			}
		
			function handleWayPoints(wayPoints) {
				document.getElementById("trips").innerHTML="way points loaded ...";
			
				if(wayPoints.length > 0) {
					var points = new Array();
					
					if(page == 1) {
						map.setCenter(new GLatLng(wayPoints[0].latitude, wayPoints[0].longitude));
					}
					
					for(var i = 0; i<wayPoints.length; i++) {
						points[i] = new GLatLng(wayPoints[i].latitude, wayPoints[i].longitude);
					}
					
					//map.setCenter(new GLatLng(wayPoints[wayPoints.length - 1].latitude, wayPoints[wayPoints.length - 1].longitude));
					
					var polyline = new GPolyline(points, "#0000ff", 8);
					map.addOverlay(polyline);
					
					//document.getElementById("moreLink").innerHTML="<a href='javascript:loadWayPoints(\"" + trip + "\", " + page + ")'>show more</a>";
					document.getElementById("moreLink").innerHTML="...";
					window.setTimeout("loadWayPoints(\"" + trip + "\", " + page + ");",100);
				} else {
					document.getElementById("moreLink").innerHTML="no more way points available";
				}
			}
		
		    function handleTrips(trips){
				var response="Successfully <b>loaded</b><br/>" + 
				             "<table><tbody>";
				for(var i=0; i<trips.length; i++) {
					response = response + "<tr><td>" + trips[i].description + "</td><td><a href='javascript:loadWayPoints(\"" + trips[i].key + "\", 0)'>show in map</a></td><td><a href='javascript:loadBlogEntries(\"" + trips[i].key + "\")'>show blog entries</a></td></tr>";
				}
				
				response = response + "</tbody></table>"
				document.getElementById("trips").innerHTML = response;
		    }
		
		    function loadTrips() {
				document.getElementById("trips").innerHTML="loading ...";		
				travelTracker.getAllTrips(handleTrips);
		    }
		
		
		    function loadBlogEntries(tripKey) {
				document.getElementById("blogEntries").innerHTML="loading ...";		
				blogService.getBlogEntriesByTrip(tripKey, handleBlogEntries);
		    }
			
			function handleBlogEntries(blogEntries){
				var markers = new Array();
				
				for(var i = 0; i < blogEntries.length; i++) {
					var point = new GLatLng(blogEntries[i].wayPoint.latitude,
											blogEntries[i].wayPoint.longitude);					
					
					markers[i] = new GMarker(point);
			
					createBlogEntryMarker(markers[i], blogEntries[i].title, blogEntries[i].content);
				
					if(i == 0) {
						map.setCenter(point);
					}	
				}
				
				mgr.addMarkers(markers, 1);
				mgr.refresh();
						
				document.getElementById("blogEntries").innerHTML = "Blog Entries loaded";
		    }
		    
		    function createBlogEntryMarker(marker, title, content) {	
				GEvent.addListener(marker, "click", function() {
					marker.openInfoWindowHtml("<div id='blogEntry'><p id='blogEntryTitle'>"+ title +"</p><div id='blogEntryContent'>" + content + "</div></div>");
		 			});
		    }
			
		    //]]>
		    </script>
	</ui:define>
	<ui:define name="title">
		Travel Tracker
	</ui:define>
	<ui:define name="body">
		<div id="mapContainer">
			<div id="innerMapContainer">
				<div id="mapDiv123"></div>
			</div>
			<div id="mapControlContainer">
				<a href="javascript:loadTrips()">show trips</a>
				<div id="trips"></div>
				<div id="moreLink"></div>
				<div id="blogEntries"></div>
			</div>
		</div>
	</ui:define>
</ui:composition>
</body>
</html>